<template>
    <div>
        <header>
            <div><label>地区</label>
                <el-select v-model="value" placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div><label>区域</label>
                <el-select v-model="value" placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div>
                <el-button type="primary">查看二维码</el-button>
                <el-button type="success">新建二维码</el-button>
            </div>
            <el-button id="returnButton" type="primary" plain>← 返回</el-button>
        </header>
        <main>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="code"
                        label="二维码"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="codeUri"
                        label="二维码链接"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="二维码地址">
                </el-table-column>
                <el-table-column
                        prop="option"
                        label="操作">

                    <el-button id="optionButton" @click="fixed" type="primary" plain>修改</el-button>

                </el-table-column>
            </el-table>
            <div id="fixedTable">
                <el-form :model="address" :rules="rules" ref="address" label-width="100px" class="demo-ruleForm" label-position="left">
                    <el-form-item label="校区" prop="">
                        <el-input></el-input>
                    </el-form-item>
                    <el-form-item label="当前区域" prop="">
                        <el-input></el-input>
                    </el-form-item>
                    <el-form-item label="二维码张贴地址" prop="address">
                        <el-input v-model="address"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button>取消</el-button>
                        <el-button type="primary">确定</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </main>
    </div>
</template>

<script>
    export default {
        name: "RegionCode",
        data() {
            return {
                value1: true,
                value2: true,
                address: '',
                rules: [{
                    address: [{required: true}]
                }],
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value: '',
                tableData: [{
                    code: '2016-05-02',
                    codeUri: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    code: '2016-05-04',
                    codeUri: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    code: '2016-05-01',
                    codeUri: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    code: '2016-05-03',
                    codeUri: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            }
        },
        methods: {
            fixed() {
                this.$prompt('二维码张贴地址', '修改二维码', {
                    confirmButtonText: '修改',
                    cancelButtonText: '取消',
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            }
        }
    }
</script>

<style scoped>
    header > div {
        float: left;
    }

    label {
        font-size: 24px;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    main {
        position: relative;
        width: 95%;
        left: 5%;
    }

    #returnButton {
        position: absolute;
        right: 2%;
    }

    #fixedTable {
        width: 800px;
    }
</style>